import * as React from 'react'
import TodoItem, { IListItem, IListItemMeta } from './TodoItem'

// 列表接口, 接收的类型为item类型
interface IList {
  list: IListItemMeta[];
  onDelete: IListItem['onDelete'];
  onToggleDone: IListItem['onToggleDone'];
  onChangeInfo: IListItem['onChangeInfo'];
}

class TodoList extends React.Component<IList> {
  public render() {
    const { list, onDelete, onToggleDone, onChangeInfo } = this.props;
    return (
      <ul className="todo__list--wrapper">
        {
          list.map(item => {
            return (
              <TodoItem
                key={item.id}
                {...item}
                onDelete={onDelete}
                onToggleDone={onToggleDone}
                onChangeInfo={onChangeInfo}
              />
            )
          })
        }
      </ul>
    )
  }
}

export { IList }
export default TodoList